<template>
  <div class="vehicle-page">
    <div class="box">车辆列表</div>
    <el-row class="box-row">
      <el-col :span="24">
        <div class="box-col">
          <el-row :gutter="20">
            <el-col :span="8">
              <div>
                <span style="margin-right: 10px">车辆类型:</span>
                <el-select v-model="form.truckTypeName" placeholder="请选择车辆类型" style="width: 300px">
                  <el-option
                    v-for="item in arr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                    clearable
                  />
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <span style="margin-right: 10px">车牌号码:</span>
                <el-input
                  v-model="form.licensePlate"
                  style="width: 300px"
                  type="text"
                  placeholder="请输入车牌号码"
                  clearable
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="classOne-box">

                <el-button type="danger" @click="hChange">搜索</el-button>
                <el-button @click="hRest">重置</el-button>

              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="box-col-two">
          <div class="tab-item">
            <div :class="{ active: selected === 0 }" @click="hStatus">
              <span class="status">全部</span>
              <span class="status">23</span>
            </div>
          </div>
          <div class="tab-item">
            <div :class="{ active: selected === 1 }" @click="hStatusOne">
              <span class="status">可用</span>
              <span class="status">11</span>
            </div>
          </div>
          <div class="tab-item">
            <div :class="{ active: selected === 2 }" @click="hStatusTwo">
              <span class="status">停用</span>
              <span class="status">12</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="classTow">
          <div class="role-operate">
            <el-button type="primary" @click="open('add')">新增车型</el-button>
          </div>
          <!-- table表格 -->
          <el-table
            stripe
            :data="list"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="70"
            />
            <el-table-column
              prop="licensePlate"
              label="车辆号码"
              width="200"
            />
            <el-table-column
              prop="truckTypeName"
              label="车辆类型"
              width="180"
            />
            <el-table-column
              prop="driverNum"
              label="司机数量"
              width="150"
            />

            <el-table-column prop="allowableLoad" label="车辆状态" width="150">
              <template #default="{ row }">
                <span v-if="row.workStatus === 1" class="table-span">
                  <i class="dotClass" style="background-color: springgreen" />
                  可用
                </span>
                <span v-else class="table-span">
                  <i class="dotClass" style="background-color: red" />
                  停用
                </span>
              </template>
            </el-table-column>

            <el-table-column
              prop="deviceGpsId"
              label="GPS设备ID"
              width="150"
            />
            <el-table-column
              prop="allowableLoad"
              label="实际载重(T)"
              width="150"
            />
            <el-table-column
              prop="allowableVolume"
              label="实际体积(方)"
              width="135"
            />
            <el-table-column label="操作" width="200px">
              <template v-slot="{ row }">
                <el-button size="small" type="text" @click="$router.push('/transit/vehicle-detail/' + row.id)">查看详情</el-button>
                <el-button v-if="row.workStatus === 1" size="small" type="text" class="el-botton-red" @click="discontinued">停用</el-button>
                <el-button v-else size="small" type="text" @click="henable">启用</el-button>
                <el-button size="small" type="text" @click="hDriver">配置司机</el-button>
              </template>

            </el-table-column>
          </el-table>
          <!-- 放置分页组件 -->
          <el-row type="flex" style="height:60px" align="middle" justify="end">
            <!-- 放置分页组件 -->
            <el-pagination
              :current-page="form.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="form.pageSize"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="hSizeChange"
              @current-change="hCurrentChange"
            />
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 添加车辆 -->
    <el-dialog
      :title="title[type]"
      :visible.sync="isShow"
      width="35%"
      :before-close="handleClose"
      custom-class="dialog-box"
    >
      <el-form ref="form" label-width="80px" :model="form" :rules="rules">
        <el-form-item label="车辆类型" prop="truckTypeName" label-width="100px">
          <el-select v-model="form.truckTypeName" placeholder="请选择车辆类型" style="width: 420px">
            <el-option
              v-for="item in arr"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              clearable
            />
          </el-select>
        </el-form-item>

        <el-form-item label="车牌号码" prop="licensePlate" label-width="100px">
          <el-input
            v-model="form.licensePlate"
            style="width: 420px"
            type="text"
            placeholder="请输入车牌号码"
            clearable
          />
        </el-form-item>

        <el-form-item label="GPS设备ID" prop="deviceGpsId" label-width="100px">
          <el-input
            v-model="form.deviceGpsId"
            style="width: 420px"
            type="text"
          />
        </el-form-item>

        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button type="danger" @click="hAddTruck">确定</el-button>
              <el-button size="medium">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 启用 Dialog 对话框 -->
    <el-dialog
      title="车辆启用"
      :visible.sync="isEdit"
      width="30%"
      :before-close="henableClose"
    >
      <div class="dialog-div">
        <p>确定要启用吗？车辆启用需满足以下条件:</p>
        <span class="dialog-div-spanOne">1</span>
        <span>车辆信息已完善</span>
        <span class="dialog-div-spanTwo">2</span>
        <span>绑定司机>=2,且有排班</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditRest">取 消</el-button>
        <el-button type="primary" @click="addisEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 停用 Dialog 对话框 -->
    <el-dialog
      title="车辆停用"
      :visible.sync="showRoleDialog"
      width="30%"
      :before-close="discontinuedClose"
    >
      <div class="dialog-div">
        <p>确定要停用吗？车辆停用需满足以下条件:</p>
        <span class="dialog-div-spanOne">1</span>
        <span>车辆当前无运输任务</span>
        <span class="dialog-div-spanTwo">2</span>
        <span>车辆无关联运输线路</span>
        <p class="dialog-div-p">注: 停用后司机将自动解除绑定</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hshowRoleDialog">取 消</el-button>
        <el-button type="primary" @click="putDiscontinued">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 配置司机 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="isDialog"
      width="30%"
      :before-close="driverClose"
    >
      <div class="dialog-div">
        <p>配置司机需满足以下条件:</p>
        <span class="dialog-div-spanOne">1</span>
        <span>车辆信息已完善</span>
        <span class="dialog-div-spanTwo">2</span>
        <span>车辆无未完成运输任务</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="restDriver">取 消</el-button>
        <el-button type="primary" @click="getDriver">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPageList } from '@/api/car-models'
import { getVehicleList, postVehicle, putEnable, putDisable, getTruck } from '@/api/vehicle'
export default {
  name: 'VehiclePage',
  data() {
    return {
      isDialog: false,
      truckId: 1,
      isEditId: 1,
      showRoleDialog: false,
      isEdit: false,
      curId: '',
      option: [
        {
          label: '<1.8 (吨)'
        },
        {
          label: '1.8-6 (吨)'
        },
        {
          label: '6-14 (吨)'
        },
        {
          label: '14-30 (吨)'
        },
        {
          label: '30-50 (吨)'
        },
        {
          label: '50-100 (吨)'
        },
        {
          label: '100> (吨)'
        }
      ],

      form: {
        allowableLoad: '',
        allowableVolume: '',
        brand: '',
        deviceGpsId: '', // GPS设备ID
        driverName: '',
        driverNum: '',
        id: '',
        licensePlate: '', // 车牌号码
        loadingRatio: '',
        picture: '',
        runStatus: '',
        status: '',
        transportLineName: '',
        truckLicenseId: '',
        truckTypeId: '', // 车辆类型id
        truckTypeName: '', // 车辆类型
        workStatus: '', // 状态
        page: 1,
        pageSize: 10
      },
      rules: {
        truckTypeName: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        licensePlate: [
          { required: true, message: '车牌号不能为空', trigger: 'blur' },
          {
            pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/,
            message: '请输入正确格式的车牌号',
            trigger: 'blur'
          }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS设备ID不能为空', trigger: 'blur' }
        ]
      },
      type: 'add',
      title: {
        add: '新增车辆',
        edit: '编辑车辆'
      },
      isShow: false,
      list: [],
      arr: [],
      selected: -1,
      total: null
    }
  },
  created() {
    // 封装 分页
    this.getVehicle()
    this.getRole()
  },
  methods: {

    // 全部
    hStatus() {
      this.selected = 0
      this.form.workStatus = ''
      this.getVehicle()
    },
    // 可用
    hStatusOne() {
      this.selected = 1
      this.form.workStatus = 1
      this.getVehicle()
    },
    // 停用
    hStatusTwo() {
      this.selected = 2
      this.form.workStatus = 0
      this.getVehicle()
    },
    open(type, id) {
      console.log(type, id)
      this.isShow = true
    },

    // 添加功能
    async hAddTruck() {
      const res = await postVehicle(this.form)
      console.log(res)
      // 添加成功 提示用户
      this.$message.success('添加成功')
      // 清空表单   后面在优化
      this.$refs.form.resetFields()
      // 关闭弹框  后面在优化
      this.isShow = false
      // 重新渲染  后面在优化
      this.getVehicle()
    },
    // 发送分页请求
    async  getVehicle() {
      const res = await getVehicleList(this.form)
      console.log(res)
      this.list = res.data.items
      this.total = parseInt(res.data.counts)
    },
    // 获取车辆类型分页数据
    async getRole() {
      const res = await getPageList(this.form)
      console.log(res)
      this.arr = res.data.items
    },
    // 搜索
    hChange() {
      this.getVehicle()
    },
    // 重置
    hRest() {
      this.form = {
        allowableLoad: '',
        allowableVolume: '',
        brand: '',
        deviceGpsId: '', // GPS设备ID
        driverName: '',
        driverNum: '',
        id: '',
        licensePlate: '', // 车牌号码
        loadingRatio: '',
        picture: '',
        runStatus: '',
        status: '',
        transportLineName: '',
        truckLicenseId: '',
        truckTypeId: '', // 车辆类型id
        truckTypeName: '', // 车辆类型
        workStatus: '', // 状态
        page: 1,
        pageSize: 10
      }
      // 重新渲染
      this.getVehicle()
    },
    // sizes的事件
    hSizeChange(page) {
      console.log(page)
      this.form.pageSize = page
      // 2. 更新页码为1
      this.page = 1
      // 重新渲染
      this.getVehicle()
    },
    hCurrentChange(page) {
      // console.log(page)
      // 更新页码
      this.form.page = page
      // 重新渲染
      this.getVehicle()
    },
    // 点击 X
    handleClose() {
      console.log('点击了X')
      this.isShow = false
    },
    // 启用按钮
    async henable() {
      this.isEdit = true
    },
    // 启用Dialog 确定
    async addisEdit() {
      // 发送请求
      await putEnable(this.isEditId)
      // 提示用户启用成功
      this.$message.success('启用成功')
      // 关闭弹框
      this.isEdit = false
    },
    // 停用按钮 确定
    async putDiscontinued() {
      // 发送停用请求
      await putDisable(this.isEditId)
      // 停用成功 提示用户
      this.$message.success('停用成功')
      // 关闭弹框
      this.showRoleDialog = false
    },
    // 配置司机 确定
    async getDriver() {
      const res = await getTruck(this.truckId)
      console.log(res)
    },
    // 启用Dialog 取消
    isEditRest() {
      this.isEdit = false
      this.$message.info('已取消')
    },
    // 启用Dialog 点击 X
    henableClose() {
      this.isEdit = false
      this.$message.info('已取消')
    },
    // 停用按钮
    discontinued() {
      this.showRoleDialog = true
    },
    // 停用按钮 取消
    hshowRoleDialog() {
      // 关闭弹框
      this.showRoleDialog = false
      this.$message.info('已取消')
    },
    // 停用按钮 点击 X
    discontinuedClose() {
      console.log('点击了X')
      this.showRoleDialog = false
      this.$message.info('已取消')
    },
    // 配置司机
    hDriver() {
      this.isDialog = true
    },
    // 配置司机 点击X
    driverClose() {
      this.isDialog = false
      this.$message.info('已取消')
    },
    // 配置司机 取消
    restDriver() {
      this.isDialog = false
      this.$message.info('已取消')
    }
  }
}
</script>

<style lang="scss">
.box {
  padding-left: 23px;
}
.box-row {
  padding: 23px 20px 20px;
}
.box-col {
  height: 80px;
  background-color: #fff;
  padding: 20px;
}
.box-col-two {
  display: flex;
  height: 48px;
  background-color: #fff;
  margin: 20px 0px;
  .tab-item {
    width: 120px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    color: #333;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
    .status {
      font-weight: 700;
      font-size: 14px;
    }
  }
}
.classTow {
  background-color: #fff;
  padding: 28px;
  .role-operate {
    margin-bottom: 20px;
  }
}
.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
.active {
    background-color: #ffeeeb;
    color: #e15536;
  }
.dotClass {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  margin-right: 10px;
}
.table-span {
  display: flex;
  align-items: center;
}
.el-botton-red {
  color: red;
}
.el-dialog{
  border-radius: 5px;
  .el-dialog__body {
    padding: 5px 20px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    .dialog-div-spanOne {
      width: 16px;
      height: 16px;
      background: rgb(250, 252, 255);
      border: 1px solid rgb(235, 238, 245);
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      margin-right: 6px;
      line-height: 14px;
    }
    .dialog-div-spanTwo {
      width: 16px;
      height: 16px;
      background: rgb(250, 252, 255);
      border: 1px solid rgb(235, 238, 245);
      margin-left: 90px;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      line-height: 14px;
      margin-right: 6px;
    }
    .dialog-div-p {
      color: #ffc236;
    }
  }
}
</style>
